<div id="app">
    <admin-page-header>
        <bi-button type="primary" @click="edit">添加区块</bi-button>
        <bi-button  @click="$go({action:'group'})">分组管理</bi-button>
    </admin-page-header>
    <div class="container">
        <div class="row g-2">
            <div class="col-12">
                <bi-card title="搜索">
                    <div class="row g-2">
                        <div class="col-6 col-sm-6 col-lg-6">
                            <block-group  v-model="search.blockgroup_id"    ></block-group>
                        </div>
                        <div class="col-6 col-sm-6 col-lg-6">
                            <bi-input v-model="search.keyword"  placeholder="" icon="fa fa-search" ></bi-input>
                        </div>
                    </div>
                </bi-card>
            </div>
            <div class="col-12">
                <bi-card title="区块列表">
                    <bi-table checkbox :data="list" :loading="loading" min-height="300">
                        <bi-table-column label="标题" name="title"></bi-table-column>
                        <bi-table-column label="模型" name="model_title"></bi-table-column>
                        <bi-table-column label="管理" width="250"  v-slot="{row}">
                            <bi-button type="primary" @click="$go({action:'item',gets:{'block':row.block_id}})"  >管理内容</bi-button>
                            <bi-button type="primary" @click="edit(row)"  >编辑</bi-button>
                            <bi-button type="warning" @click="handleDel(row)" >删除</bi-button>
                        </bi-table-column>
                    </bi-table>
                    <template #footer>
                        <bi-pagination v-model="page" :total="total" :count="count" ></bi-pagination>
                    </template>
                </bi-card>
            </div>
        </div>
    </div>
</div>

<script>
import editDialog from 'block/edit-dialog.vue';
import blockGroup from 'field/block-group.vue';
import {debounce} from '@@/admin/assets/js/global.js';
let app = admin.createApp({
    data(){

        let search = {
            blockgroup_id:'',
            status:'',
            keyword:'',
        }

        search  = this.$assign(search,this.$status.get('search'));
        
        return {
            search,
            list:[],
            loading:false,
            page:this.$status.get('page')??1,
            total:0,
            count:0
        }
    },
    watch:{
        search:{
            handler:debounce(function(val){
                
                this.page = 1;
                this.refresh();
            },1000),
            deep:true
        },
        page(val){
            this.refresh();
        }        
    },
    components:{
        blockGroup,
    },
    methods:{
        edit(item){
            let title = item? '编辑区块':'添加区块';
            this.$dialog({
                title,
                type:'vue',
                content:admin.createApp(editDialog,{item}),
                callback:(value)=>{
                    //this.$user.delLocalStorage('web-block-input');
                    this.refresh();
                }
            })
        },
        handleDel(item){
            this.$confirm({text:'确定删除？',type:'warning'},()=>{
                this.$ajax({
                    url:this.$url({action:'del'}),
                    data:{
                        block_id:item.block_id
                    },
                    success:(res)=>{
                        this.refresh();
                        //this.$user.delLocalStorage('web-block-input');
                        this.$toast({text:'删除成功',type:'success'});
                    }
                })
            })
        },
        refresh(){


            this.$status.set('page',this.page);
            this.$status.set('search',this.search);
            
            this.$ajax({
                url:this.$url({app:'web',controller:'admin.block',action:'list'}),
                data:{
                    page:this.page,
                    ...this.search
                },
                success:(data)=>{
                    this.list = data.list;
                    this.total = data.total;
                    this.count = data.count;
                    this.loading = false;
                }
            })
        }
    },
    mounted(){
        this.refresh();
    }
}).mount('#app');
</script>